import styles from '@/pages/home/index.module.less';
import { Text, View } from 'ray';
import Strings from '@/i18n';
import React from 'react';
import clsx from "clsx";

interface IProps {
  timerSwitch:boolean,
  selectedDays: number[];
  toggleDay: (day: number) => void;
}

const days = [
  Strings.getLang('sun'),
  Strings.getLang('mon'),
  Strings.getLang('tue'),
  Strings.getLang('wed'),
  Strings.getLang('thu'),
  Strings.getLang('fri'),
  Strings.getLang('sat'),
];
export default function CycleCell({ timerSwitch, selectedDays, toggleDay }: IProps) {
  return (
    <View className={clsx( styles.cell,{
            [styles.disabled]: timerSwitch,
          })}>
      <View>
        <Text>{Strings.getLang('cycle')}</Text>
      </View>
      <View className={styles.cycleWrap}>
        {days.map((day, index) => {
          const isSelected = selectedDays.includes(index);
          return (
            <View
              key={index}
              className={isSelected ? styles.selectedDay : styles.day}
              onClick={() => toggleDay(index)}
            >
              <Text>{day}</Text>
            </View>
          );
        })}
      </View>
    </View>
  );
}
